<template>
  <Row>
    <Col :span="3">
        <hierTree :data="current.groups" v-bind="treeAttrs" :ref="'tree'"
        @select="select"
        @add="add"
        @remove="remove"
        @menu="menu"></hierTree>
    </Col>
    <Col v-if="item" :span="21">
        <cfg-form :ref="'form'" v-bind="formAttrs" :data="item" @change="formChange"></cfg-form>
    </Col>
</Row>
</template>

<script>
export default {
  name:'',
  components: {},
  data() {
    return {
        item:null
    };
  },
  props: {
    current:{
        default:()=>{
            return {
            }
        }
    }
  },
  watch: {},
  computed: {
    treeAttrs(){
        return {
            title:{
                "en-US":'Group List',
                "zh-CN": 'Group List'
            }[this.G_Locale],
            rootId:null,
            nameId:'id',
            namePid:'parentId',
            nameTitle:'id',
            rootEnable:true,
            menuEnable:true,
            addEnable:true,
            removeEnable:true,
            menus:[]
        }
    },
    formAttrs(){
        return {
            labelWidth: 100,
            labelPosition: 'right',
            cols: 2,
            columns: [
                {
                    key: 'id',
                    title: 'id',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'text'
                    }
                },
                {
                    key: 'fill',
                    title: '填充',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'color',
                    },
                },
                {
                    key: 'fillId',
                    title: '填充样式',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'select',
                        options:[{value:'',label:'无'}].concat(this.current.fills?this.current.fills.map(item=>{
                            return {
                                value:item.id,
                                label:item.id
                            }
                        }):[])
                    },
                },
                {
                    key: 'opacity',
                    title: '透明度',
                    minWidth: 100,
                    align: 'center',
                    show: true,
                    config:{
                        type:'number',
                        min:0,
                        max:1,
                        step:0.1
                    },
                }
            ],
            rules:{
                type: [
                    { required: true, message: '请输入所属类型', trigger: 'blur' }
                ],
                className: [
                    { required: true, message: '请输入模型类名', trigger: 'blur' }
                ]
            },
            onlyRead:false

        }
    },

  },
  created() {},
  mounted() {},
  methods: {
    select(item){
        this.item = item;
    },
    add(item){
        this.current.groups.push(this.groupTpl());
    },
    remove(item){
        this.current.groups.splice(this.current.groups.indexOf(item),1);
        this.item = null;
    },
    menu(menu,item){
        
    },
    formChange(key,value){
        
    },
    setTree(fn){
      this.$refs.tree.$children[0].setTree(fn)
    },
    groupTpl(){
        return {
            id:'group',
            fill:'',
            opacity:1,
            fillId:''
        }
    },
  }
};
</script>
<style scoped>
</style>